import {App, Button, Checkbox, Flex, Form, Input, Space} from "antd";
import {UserOutlined, LockOutlined} from "@ant-design/icons";
import LogFactory from "@/log/LogFactory.ts";
import {LoginData, LoginSuccessData} from "@/http";
import {useNavigate} from "react-router-dom";
import {useState} from "react";
import RequestHandler from "@/http/RequestHandler.ts";
import {saveString} from "@/util/local-storage.ts";
import bg_video from "@/assets/bg.mp4";
import {
    LOGIN_AUTHORIZATION_KEY, LOGIN_EXPIRE_SECONDS_KEY,
    LOGIN_EXPIRE_TIME_KEY,
    LOGIN_IDENTITY_KEY,
    LOGIN_TIME_KEY, LOGIN_TOKEN_ID_KEY, LOGIN_USER_AVATAR_KEY,
    LOGIN_USERNAME_KEY
} from "@/global/constant.ts";
const log = LogFactory.getLogger("LoginComponent");
const LoginComponent = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const navigate = useNavigate();
    const {message} = App.useApp();

    /**
     * 用户登录成功处理器
     */
    const loginSuccessHandler = async (data: LoginSuccessData) => {
        log.debug("用户登录成功处理: ", data);
        saveString(LOGIN_USERNAME_KEY,data.username);
        saveString(LOGIN_AUTHORIZATION_KEY,data.token);
        saveString(LOGIN_IDENTITY_KEY,data.identity);
        saveString(LOGIN_USER_AVATAR_KEY,data.avatar);
        saveString(LOGIN_TIME_KEY,data.loginTime);
        saveString(LOGIN_EXPIRE_TIME_KEY,data.expireTime);
        saveString(LOGIN_TOKEN_ID_KEY,data.tokenId);
        saveString(LOGIN_EXPIRE_SECONDS_KEY,data.expireSeconds.toString());
    }

    const onFinish = async (value: LoginData) => {
        // log.debug("用户登录表单: ", value);
        setLoading(true);
        const loginData = await RequestHandler.login(value);
        if (!loginData.success){
            await message.error("用户登录错误!");
            setLoading(false);
        }
        message.success("用户登录成功！");
        await loginSuccessHandler(loginData.data);
        setLoading(false);
        navigate("/nav");
    }
    return (
        <div className={"login-container"}
             style={{
                 height: "100vh",
                 width: "100vw",
                 overflow: "hidden"
             }}
        >
            <video className={"video-bg"}
                   style={{
                       width: "100%",
                       height: "100%",
                       objectFit: "cover",
                       position: "fixed",
                       zIndex: "1"
                   }}
                   src={bg_video} autoPlay muted loop>
            </video>
            <div className="login-main"
                 style={{
                     position: "fixed",
                     zIndex: "10",
                     margin: "auto",
                     height: "300px",
                     inset: "0",
                     backgroundColor: "rgba(0, 0, 0, 0.65)",
                     width: "440px",
                     padding: "0 40px 50px 40px",
                     borderRadius: "6px"
                 }}
            >
                <div>
                    <Flex gap={20} style={{
                        justifyContent: "center",
                        alignItems: "center"
                    }}>
                        <img className="logo-icon"
                             src="https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg"
                             alt="ProComponents" height="40"/>
                        <h2 style={{fontSize: "30px"}}>Jasmine</h2>
                    </Flex>
                    <div style={{
                        textAlign: 'center',
                        marginTop: "-15px",
                        color: "#878383"
                    }}>
                        最新React + Vite 后台管理系统
                    </div>
                </div>
                <hr style={{marginBottom: "10px"}}/>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{remember: true}}
                    // autoComplete="off"
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{required: true, message: '用户名必须填写!'}]}
                    >
                        <Input
                            autoComplete='new-username'
                            size='large' prefix={<UserOutlined className="site-form-item-icon"/>}
                            placeholder="请输入用户名"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{required: true, message: '登录密码必须填写!'}]}
                    >
                        <Input
                            autoComplete='new-password'
                            size='large'
                            prefix={<LockOutlined className="site-form-item-icon"/>}
                            type="password"
                            placeholder="请输入登录密码"
                        />
                    </Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>记住用户名和密码</Checkbox>
                    </Form.Item>
                    <Form.Item style={{margin: "20px 0"}} wrapperCol={{span: 4, offset: 6}}>
                      <Space size={50}>
                          <Button loading={loading} type="primary" htmlType="submit">
                              用户登录
                          </Button>
                          <Button loading={loading} type="link">
                              注册用户
                          </Button>
                      </Space>
                    </Form.Item>
                </Form>

            </div>
        </div>
    );
};

export default LoginComponent;